<template>
    <div>
        <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu :index="(index + 1).toString()" v-for="(item, index) in navlist" :key="index">
                <template #title>

                    <el-icon v-if="index==0"><Football /></el-icon>
                    <el-icon v-else-if="index==1"><GobletSquare /></el-icon>
                    <el-icon v-else-if="index==2"><Cpu/></el-icon>
                    <span>{{ item.category }}</span>
                </template>
                 
                <el-menu-item :index="((index + 1) + '-' + (i + 1)).toString()" v-for="(list, i) in item.list"
                    :key="i" @click="$emit('handle',list.cid)">{{
                        list.name
                    }}</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>
<script>
import axios from 'axios'
import { Football ,GobletSquare,Cpu} from '@element-plus/icons-vue'
export default {
    mounted() {
        axios.get('navlist.json').then(res => {

            this.navlist = res.data.navlist
            console.log(this.navlist)
        })
    },
    data() {
        return {
            navlist: []
        }
    },
    components: {
       Football,
       GobletSquare,
       Cpu ,
    },
    prop:['list']
    


}
</script>
